<template>
  <div class="service-my-comment">
    <loading :show="loading" />
    <div class="text" v-if="!openComment">评论已关闭</div>
    <div class="list" v-else>
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <cube-button inline danger class="del" @click="remove(item)">删除</cube-button>
        <div class="time">评论时间: {{item.create_time}}</div>
        <div class="user" v-if="item.user">
          <div class="avatar">
            <img :src="item.user.avatar" />
          </div>
          <div class="nickname">{{item.user.nickname}}</div>
        </div>
        <div @click="goProduct(item)">
          <div class="images" v-if="item.path && item.path.length > 0">
            <div class="img" v-for="(o, i) in item.path" :key="i">
              <img :src="o" />
            </div>
          </div>
          <div class="content"><span>评论: </span>{{item.content}}</div>
        </div>
      </div>
    </div>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      :data-len="list.length"
      @loadMore="loadMore" />
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import PullUp from '@/components/PullUp'
export default {
  components: {
    PullUp,
    Loading
  },
  data() {
    return {
      loading: false,
      list: [],
      queryList: {},
      openComment: true
    }
  },
  methods: {
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.Comment.list({
          ...this.queryList
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    goProduct(item) {
      this.$router.push(`/product/detail/${item.product_id}`)
    },
    remove(item) {
      // disable btn
      this.$set(item, 'disabled', true)
      this.$createDialog({
        type: 'confirm',
        title: '确定取消这个评论吗?',
        onConfirm: () => {
          this.loading = true
          api.Comment.del({ id: item.id }).then(() => {
            this.$createToast({
              type: 'correct',
              time: 500,
              txt: '取消成功',
              onTimeout: () => {
                this.list = this.list.filter(x => x.id !== item.id)
              }
            }).show()
          }).finally(() => {
            this.loading = false
          })
        },
        onCancel: () => {
          // disable btn
          this.$set(item, 'disabled', false)
        }
      }).show()
    },
    check() {
      api.Comment.check({
        id: this.$route.params.id
      }).then(response => {
        const { data } = response
        if (data.is !== true) {
          this.openComment = false
          return this.$createToast({
            type: 'error',
            time: 1500,
            txt: data.message,
            onTimeout: () => {
              this.$router.back()
            }
          }).show()
        }
      })
    }
  },
  created () {
    this.init()
    this.getList()
    this.check()
  },
  activated () {
  },
  deactivated () {
    this.queryList.busy = true
  }
}
</script>

<style scoped lang="stylus">
.service-my-comment
  margin 10px
  padding 10px
  background white
  border-radius 10px
  text-align left
  p
    line-height 22px
  .list
    display flex
    flex-direction column
    .list-item
      margin-bottom 10px
      position relative
      .del
        position absolute
        right 10px
        top 10px
      .user
        display flex
        align-items center
        .avatar
          width 60px
          //background red
          img
            width 50px
            height 50px
            border-radius 50%
        .nickname
          flex 1
          //background black
          height 20px
          line-height 20px
          overflow hidden
          font-weight 700
      .images
        //background red
        padding 10px 0
        display flex
        flex-wrap wrap
        .img
          width 100px
          padding-right 10px
          img
            display block
            margin auto
            width auto
            height auto
            max-width 100%
            max-height 100%
      .content
        margin-top 5px
        margin-bottom 20px
        line-height 1.5em
        span
          font-weight 700
          padding-right 10px
      .time
        margin 10px 0
        color #ccc
        font-weight 700
</style>
